<template>
    <div>
        <div class="top-header">
            <div class="header-links">
                <a href="http://www.didalink.cn/" @click.prevent="handleHelpDoc">帮助文档</a>
                <a-divider type="vertical" />
                <a href="http://www.didalink.cn/" @click.prevent="handleLearningPlatform">学习平台</a>
                <a-divider type="vertical" />
                <a href="http://www.didalink.cn/" @click.prevent="handleApiDoc">API文档</a>
                <a-divider type="vertical" />
                <a href="http://www.didalink.cn/" @click.prevent="handleQuickStart">快速开始</a>
                <a-divider type="vertical" />
                <a href="http://www.didalink.cn/" @click.prevent="handleOnlineSupport">在线支持</a>
                <a-divider type="vertical" />
                <a href="#" @click.prevent="handleCheckForUpdates">检查更新</a>
            </div>
            <div class="header-right">
                <!-- <a-button type="link" icon="shopping-cart" class="cart-button" /> -->
                <a-divider type="vertical" />
                <div class="user-dropdown">
                    <a-dropdown>
                        <a-button type="link" style="color: #fff;">
                            <a-icon type="user" /> {{ userInfo.username }}
                            <a-icon type="down" />
                        </a-button>
                        <a-menu slot="overlay" @click="handleMenuClick">
                            <a-menu-item key="info">
                                <a-icon type="info-circle" /> 用户信息
                            </a-menu-item>
                            <a-menu-item key="switch">
                                <a-icon type="swap" /> 切换用户
                            </a-menu-item>
                            <a-menu-divider />
                            <a-menu-item key="logout">
                                <a-icon type="logout" /> 退出登录
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
            </div>
        </div>

        <!-- 更新管理组件 - 移到flex容器外部 -->
        <UpdateManager
            ref="updateManager"
        />
    </div>
</template>

<script>
import UpdateManager from './TopHeader/UpdateManager.vue'
import { openExternalBrowserLink } from '@/api/TabAxios/base'

export default {
    name: 'TopHeader',
    components: {
        UpdateManager
    },
    props: {
        userInfo: {
            type: Object,
            required: true
        }
    },
    methods: {
        handleMenuClick({ key }) {
            if (key === 'info') {
                this.$emit('show-user-info')
            } else if (key === 'switch') {
                this.$emit('switch-user')
            } else if (key === 'logout') {
                this.$emit('logout')
            }
        },

        // 处理检查更新点击事件 - 显示版本信息对话框
        handleCheckForUpdates() {
            console.log('handleCheckForUpdates')
            this.$refs.updateManager.showVersionInfo()
        },

        async handleHelpDoc() {
            const param = {
                url: 'http://www.didalink.cn',
                type: 'help-doc'
            }
            const res = await openExternalBrowserLink(JSON.stringify(param))
            console.log('🔍 [HelpDoc] 打开帮助文档:', res)
            if (res.code === 0) {
                console.log('✅ [HelpDoc] 成功打开帮助文档')
                this.$message.success('正在为您打开帮助文档...')
            } else {
                console.error('❌ [HelpDoc] 打开帮助文档失败:', res)
                this.$message.error('打开帮助文档失败，请手动访问帮助文档网站')
            }
        },

        async handleLearningPlatform() {
            const param = {
                url: 'http://www.didalink.cn',
                type: 'learning-platform'
            }
            const res = await openExternalBrowserLink(JSON.stringify(param))
            console.log('🔍 [LearningPlatform] 打开学习平台:', res)
            if (res.code === 0) {
                console.log('✅ [LearningPlatform] 成功打开学习平台')
                this.$message.success('正在为您打开帮助文档...')
            } else {
                console.error('❌ [LearningPlatform] 打开学习平台失败:', res)
                this.$message.error('打开学习平台失败，请手动访问学习平台网站')
            }
        },

        async handleApiDoc() {
            const param = {
                url: 'http://www.didalink.cn',
                type: 'api-doc'
            }
            const res = await openExternalBrowserLink(JSON.stringify(param))
            console.log('🔍 [ApiDoc] 打开API文档:', res)
            if (res.code === 0) {
                console.log('✅ [ApiDoc] 成功打开API文档')
                this.$message.success('正在为您打开帮助文档...')
            } else {
                console.error('❌ [ApiDoc] 打开API文档失败:', res)
                this.$message.error('打开API文档失败，请手动访问API文档网站')
            }
        },
 
        async handleQuickStart() {
            const param = {
                url: 'http://www.didalink.cn',
                type: 'quick-start'
            }
            const res = await openExternalBrowserLink(JSON.stringify(param))
            console.log('🔍 [QuickStart] 打开快速开始:', res)
            if (res.code === 0) {
                console.log('✅ [QuickStart] 成功打开快速开始')
                this.$message.success('正在为您打开帮助文档...')
            } else {
                console.error('❌ [QuickStart] 打开快速开始失败:', res)
                this.$message.error('打开快速开始失败，请手动访问快速开始网站')
            }
        }, 

        async handleOnlineSupport() {
            const param = {
                url: 'http://www.didalink.cn',
                type: 'online-support'
            }
            const res = await openExternalBrowserLink(JSON.stringify(param))
            console.log('🔍 [OnlineSupport] 打开在线支持:', res)
            if (res.code === 0) {
                console.log('✅ [OnlineSupport] 成功打开在线支持')
                this.$message.success('正在为您打开帮助文档...')
            } else {
                console.error('❌ [OnlineSupport] 打开在线支持失败:', res)
                this.$message.error('打开在线支持失败，请手动访问在线支持网站')
            }
        } 
    }
}
</script>

<style scoped>
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1890ff;
    color: #fff;
    padding: 0 24px;
    height: 48px;
}
.header-links a {
    color: #fff;
    text-decoration: none;
    padding: 0 4px;
    border-radius: 2px;
    transition: color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}
.header-links a:hover {
    color: #e6f7ff;
    background-color: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}
.header-links .ant-divider-vertical {
    background-color: rgba(255, 255, 255, 0.3);
}
.header-right {
    display: flex;
    align-items: center;
}
.cart-button {
    color: #fff;
    font-size: 18px;
}
.header-right .ant-divider-vertical {
    background-color: rgba(255, 255, 255, 0.3);
    height: 24px;
    margin: 0 16px;
}
</style> 